1. Field of the Invention
Embodiments of the present invention generally relate to web page management and visualization tools and more particularly, to a method and apparatus for visualizing the underlying structure of a document using an interactive viewport overlay.
2. Description of the Related Art
Documents such as web pages and graphic compositions made using multiple layers can have complex structures that are difficult to visualize and understand. In the case of a web page, its structure, represented by document object model (DOM) nodes, is a hierarchical tree and can get very deep and complex. A DOM presents a document as a hierarchy of node objects called elements. The node at the top of the hierarch is the root node. For example, the document itself is the root node. Within the document are other elements arranged according to the hierarchical structure. For example, if the document is an online newspaper, each article in the newspaper may be an element. Within each article, the title, byline, and text may be additional elements. In this example, each article is an element that is one step deeper in the hierarchy, in this case, one step below the root node. Each additional element of each article is one step deeper in the hierarchy than the article to which it relates. All elements have a value on a z-axis of the hierarchy, called the z-order. An element's z-order identifies how many steps in the hierarchy the element is from the root node. In this example, the article element has a z-order of 1, meaning it is one step below the root node. A relationship is also definable between the elements of the hierarchy. In this example, the document, or root node, is referred to as a parent to each element that is one step below it; in this case, the document is a parent to each article. Each article element is referred to as a child of the document node. Elements that are one step below each article element are children of the article element. Elements that have the same z-order value, meaning they are at the same depth below the root node, are referred to as siblings.
A web developer or designer often needs to understand the hierarchical structure of existing web pages in order to modify and debug them. Existing mechanisms to understand a page's structure include developer tools that show a tree-like structure that represents the node-hierarchy of the elements of the page. Other mechanisms allow a user to inspect elements on the page one-by-one and then show their details (such as their node-hierarchy). Still other mechanisms look at the source text for a web page and try to understand the structure from the source text. These mechanisms display the DOM hierarchy, but force the user to switch to a different view in order to do so.
Therefore, there is a need for a method and apparatus for visualizing the underlying structure of a document using an interactive viewport overlay.